<template>
  <section class="ReportCard__container">
    <div class="__body">
      <h1>
        <span>{{ item.create_date }}</span>
      </h1>
      <p>
        详细说明：
        <span>{{ item.remark }}</span>
      </p>
    </div>
    <div class="__footer">
      <div class="progress">
        <el-progress
          :percentage="+item.progress ? +item.progress : 0"
        ></el-progress>
      </div>
    </div>
  </section>
</template>
    
  <script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    noAction: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modules: [],
    };
  },
  methods: {
    click() {},
  },
  mounted() {},
};
</script>
    
<style lang="scss" scoped>
.ReportCard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 240px;
  box-sizing: border-box;
  box-shadow: 0 0 12px #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;

  .__body {
    display: flex;
    flex-direction: column;

    padding: 10px;
    line-height: 1.6;

    h1 {
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      height: 25px;
      color: #000;
      .name {
        margin-right: 10px;
        &:hover {
          color: #409eff;
          cursor: pointer;
        }
      }

      .el-tag {
        margin-left: auto;
        border: none;
      }
    }

    p {
      color: #666;
      line-height: 1.7;

      span {
        font-size: 1.2rem;
        // border: 1px solid #409eff;
        border-radius: 5px;
        margin: 0 5px 0 0;
        padding: 0 5px;
        // color: #409eff;
        background: #ebebeb;
      }
    }
  }

  .__footer {
    // display: none;
    // display: block;
    height: 30px;
    // transition: 1s;
    background: #fcfcfc;
    .progress {
      margin-left: 10px;
    }
  }

  &:hover {
    // > .__footer {
    //   // display: flex;
    //   height: 30px;
    //   background: #f4f4f4;
    // }
  }

  .stamp {
    position: absolute;
    right: 5%;
    top: -5%;
  }
}
</style>
    